<template>
  <div>
    <el-collapse-transition>
      <div>
        <!--内容-->
        <div class="content">
          <div class="content app-main-content-box">
            <!--筛选-->
            <div class="filter-container">
              <el-form
                ref="filterForm"
                :inline="true"
                :model="filterForm"
                size="small"
              >
                <el-form-item prop="name" label="广告名">
                  <el-input
                    v-model="filterForm.name"
                    placeholder="请输入广告名"
                    maxlength="50"
                  />
                </el-form-item>

                <el-form-item prop="no" label="广告位">
                  <el-select v-model="filterForm.no" placeholder="请选择广告位">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item prop="time" label="投放时间">
                  <el-date-picker
                    v-model="filterForm.time"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="search">搜索</el-button>
                  <el-button @click="reset">重置</el-button>
                  <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
              </el-form>

              <el-radio-group v-model="filterForm.status" @change="fetch">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button :label="0">未开始</el-radio-button>
                <el-radio-button :label="1">进行中</el-radio-button>
                <el-radio-button :label="2">已结束</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="content app-main-content-box">
            <TablePanel :table-head="tableColumn" :table-data="tableData">
              <template #no="{ scope }">
                {{ AdvertisingPositionText[scope.no] }}
              </template>

              <template #innerPageJson="{ scope }">
                <div v-if="scope.thirdAppId">小程序</div>
                <div v-else-if="scope.innerPageJson">
                  {{ JSON.parse(scope.innerPageJson).title }}
                </div>
              </template>

              <template #startTime="{ scope }">
                {{ scope.startTime }}~{{ scope.endTime }}
              </template>

              <template #opr="{ scope }">
                <div v-if="scope.status === 0">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleEdit(scope)"
                  >修改</el-button>
                  <el-button
                    type="danger"
                    size="mini"
                    @click="handleDel(scope)"
                  >删除</el-button>
                </div>
                <div v-if="scope.status === 1">
                  <el-button
                    type="danger"
                    size="mini"
                    @click="handleTermination(scope)"
                  >终止</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleEdit(scope)"
                  >详情</el-button>
                </div>
              </template>
            </TablePanel>
          </div>

          <!--分页器-->
          <pagination-direction
            :config="paginationConfig"
            @sizeschange="sizesChange"
            @pagechange="pageChange"
          />
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import TablePanel from '@/publicComponents/TablePanel'
import { advertList, delAdvert, updateAdvert } from '@/api/advertising'
import {
  AdvertisingPosition,
  AdvertisingPositionText
} from '@/publicViews/operationCenter/AdvertisingManager/const'
export default {
  components: { TablePanel },
  data() {
    return {
      // tableColumn: [
      //   { label: '广告名', prop: 'name' },
      //   { label: '投放广告位', prop: 'no', type: 'custom' },
      //   { label: '广告图', prop: 'picUrl', type: 'image' },
      //   { label: '跳转内容', prop: 'innerPageJson', type: 'custom' },
      //   { label: '投放时间', prop: 'startTime', type: 'custom' },
      //   { label: '点击量', prop: 'clickCount' },
      //   { label: '保存时间', prop: 'createTime', sign: 'canChangeTime' },
      //   { label: '操作', prop: 'opr', type: 'custom' }
      // ],
      AdvertisingPositionText,
      filterForm: {
        name: '',
        no: '',
        time: [],
        startTime: '',
        endTime: '',
        status: ''
      },
      tableData: [],
      options: [
        {
          label: '全部',
          value: ''
        },
        {
          label: 'WiFi连接位一',
          value: AdvertisingPosition.POSITION_1
        },
        {
          label: 'WiFi连接成功位',
          value: AdvertisingPosition.POSITION_SUCCESS
        }
      ],
      paginationConfig: {
        // 分页配置
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [5, 10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 5 // 每页条数-默认10
      }
    }
  },
  computed: {
    tableColumn({ filterForm: { status } }) {
      let column = null
      if (status === 2) {
        column = [
          { label: '广告名', prop: 'name' },
          { label: '投放广告位', prop: 'no', type: 'custom' },
          { label: '广告图', prop: 'picUrl', type: 'image' },
          { label: '跳转内容', prop: 'innerPageJson', type: 'custom' },
          { label: '投放时间', prop: 'startTime', type: 'custom' },
          { label: '点击量', prop: 'clickCount' },
          { label: '结束时间', prop: 'endTime' },
          { label: '备注', prop: 'reason' }
        ]
      } else {
        column = [
          { label: '广告名', prop: 'name' },
          { label: '投放广告位', prop: 'no', type: 'custom' },
          { label: '广告图', prop: 'picUrl', type: 'image' },
          { label: '跳转内容', prop: 'innerPageJson', type: 'custom' },
          { label: '投放时间', prop: 'startTime', type: 'custom' },
          { label: '点击量', prop: 'clickCount' },
          { label: '保存时间', prop: 'createTime' },
          { label: '操作', prop: 'opr', type: 'custom' }
        ]
      }

      return column
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    async fetch() {
      const params = JSON.parse(JSON.stringify(this.filterForm))
      const paginationConfig = {
        page: this.paginationConfig.page,
        pageSize: this.paginationConfig.pageSize
      }
      params.startTime = params.time[0] || ''
      params.endTime = params.time[1] || ''
      const res = await advertList({
        ...paginationConfig,
        ...params
      })
      if (res?.code === 0) {
        this.tableData = res?.data?.list
        this.paginationConfig.total = res?.data?.total
      }
    },
    search() {
      this.fetch()
    },
    reset() {
      this.$refs.filterForm.resetFields()
      this.$nextTick(() => {
        this.fetch()
      })
    },
    handleAdd() {
      this.$router.push({
        name: 'AdvertisingAdd',
        query: {
          type: 'add'
        }
      })
    },
    sizesChange() {
      this.fetch()
    },
    pageChange() {
      this.fetch()
    },
    handleEdit(scope) {
      this.$router.push({
        name: 'AdvertisingAdd',
        query: {
          type: 'edit',
          id: scope.id
        }
      })
    },
    handleDel(scope) {
      this.$confirm('是否删除广告?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delAdvert({ id: scope?.id })
        if (res?.code === 0) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          await this.fetch()
        }
      })
    },
    handleTermination(record) {
      this.$prompt('', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入终止原因',
        inputErrorMessage: '请输入少于20个字符的终止原因',
        inputValidator: (val) => !!val && val.length < 20
      }).then(async({ value }) => {
        record.status = 2
        record.reason = value
        const res = await updateAdvert({ ...record })
        if (res?.code === 0) {
          this.$message({
            type: 'success',
            message: '终止成功'
          })
          this.$nextTick(() => {
            this.fetch()
          })
        }
      })

      console.log(record)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  margin-bottom: 10px;
}
</style>
